<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
//@ts-ignore
import Header from '../components/Header.vue';
//@ts-ignore
import Footer from '../components/Footer.vue';
//@ts-ignore
import UserProfile from '../components/user/UserProfile.vue';
//@ts-ignore
import UserOrders from '../components/user/UserOrders.vue';
//@ts-ignore
import UserFavorites from '../components/user/UserFavorites.vue';
//@ts-ignore
import UserSettings from '../components/user/UserSettings.vue';
//@ts-ignore
import { UserFilled, Document, Star, Setting } from '@element-plus/icons-vue';

const route = useRoute();

// 当前激活的标签
const activeTab = ref('profile');

// 从URL query参数获取当前标签
onMounted(() => {
  if (route.query.tab) {
    activeTab.value = route.query.tab as string;
  }
});

// 用户数据（实际项目中应从API获取）
const userData = ref({
  id: 1,
  name: '张旅行',
  avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GLMYPqMlt2LgkbPsOnDIAAAAA?rs=1&pid=ImgDetMain',
  email: 'travel@example.com',
  phone: '138****6666',
  joinDate: '2023-05-15',
  level: '黄金会员',
  points: 2580
});
</script>

<template>
  <div class="user-center">
    <Header />
    
    <div class="container">
      <el-card class="user-center-header">
        <div class="user-info">
          <div class="user-avatar">
            <img :src="userData.avatar" alt="用户头像">
          </div>
          <div class="user-details">
            <h2>{{ userData.name }}</h2>
            <p class="user-level">{{ userData.level }} · {{ userData.points }}积分</p>
            <p class="user-since">注册于 {{ userData.joinDate }}</p>
          </div>
        </div>
      </el-card>
      
      <div class="user-center-content">
        <el-card class="sidebar-card">
          <el-menu
            :default-active="activeTab"
            class="user-menu"
            @select="activeTab = $event"
          >
            <el-menu-item index="profile">
              <el-icon><UserFilled /></el-icon>
              <span>个人信息</span>
            </el-menu-item>
            <el-menu-item index="orders">
              <el-icon><Document /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="favorites">
              <el-icon><Star /></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item index="settings">
              <el-icon><Setting /></el-icon>
              <span>账号设置</span>
            </el-menu-item>
          </el-menu>
        </el-card>
        
        <el-card class="content-area">
          <el-tabs v-model="activeTab" tab-position="top" class="mobile-tabs">
            <el-tab-pane label="个人信息" name="profile">
              <!-- 移动端标签，桌面端隐藏 -->
            </el-tab-pane>
            <el-tab-pane label="我的订单" name="orders">
              <!-- 移动端标签，桌面端隐藏 -->
            </el-tab-pane>
            <el-tab-pane label="我的收藏" name="favorites">
              <!-- 移动端标签，桌面端隐藏 -->
            </el-tab-pane>
            <el-tab-pane label="账号设置" name="settings">
              <!-- 移动端标签，桌面端隐藏 -->
            </el-tab-pane>
          </el-tabs>
          
          <div class="tab-content">
            <UserProfile v-if="activeTab === 'profile'" :user-data="userData" />
            <UserOrders v-if="activeTab === 'orders'" />
            <UserFavorites v-if="activeTab === 'favorites'" />
            <UserSettings v-if="activeTab === 'settings'" :user-data="userData" />
          </div>
        </el-card>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<style scoped>
.user-center {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 15px;
}

.user-center-header {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  border: 3px solid #f0f8ff;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details h2 {
  margin: 0 0 5px 0;
  font-size: 24px;
  color: #333;
}

.user-level {
  color: #0066cc;
  font-weight: 500;
  margin: 0 0 5px 0;
}

.user-since {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.user-center-content {
  display: flex;
  gap: 20px;
}

.sidebar-card {
  width: 220px;
}

.user-menu {
  border-right: none;
}

.content-area {
  flex: 1;
}

/* 移动端标签样式 */
.mobile-tabs {
  display: none;
}

.tab-content {
  min-height: 500px;
}

@media (max-width: 768px) {
  .user-center-content {
    flex-direction: column;
  }
  
  .sidebar-card {
    display: none;
  }
  
  .mobile-tabs {
    display: block;
    margin-bottom: 20px;
  }
}
</style> 